<template>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
		<el-breadcrumb-item>咨询预约</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 搜索表单 -->
	<div class="serchForm">
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item label="预约用户">
				<el-input v-model="queryForm.username" placeholder="请输入用户名" clearable />
			</el-form-item>


			<el-form-item label="咨询师" style="margin-left: -20px;">
				<el-input v-model="queryForm.counselorName" placeholder="请输入咨询师" clearable />
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="query" style="margin-left: -20px;">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch" style="margin-left: -20px;">批量删除</el-button>
			</el-form-item>
		</el-form>
	</div>

	<!-- 表格组件 -->
	<!-- 表格 -->
	<div>
		<!-- 表格组件 -->
		<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange" >
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="150" />
			<el-table-column prop="bookingTime" label="预约时间" />
			<el-table-column prop="bookingDes" label="情况说明" />
			<el-table-column prop="sysUser.username" label="预约用户" />
			<el-table-column prop="consultant.consultantName" label="咨询师" />


			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default='scope'>
					<el-button type="primary" size="small" @click="check(scope.row)">
						查看
					</el-button>
					<el-button type="success" size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>


		</el-table>
		<!-- 分页组件 -->

		<el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
			:page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="total"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
	

	<!-- 查看表单 -->
	<el-dialog :title="title" v-model="dialogFormVisible" width="600" @close="cancel">
	  <el-form :model="consultData" label-width="100">
	    <el-form-item label="预约时间">
	      <el-input v-model="consultData.bookingTime" autocomplete="off" ></el-input>
	    </el-form-item>
	    <el-form-item label="情况说明">
	      <el-input type="textarea" v-model="consultData.bookingDes" ></el-input>
	    </el-form-item>
	<el-form-item label="预约用户">
	  <el-input v-model="consultData.sysUser.username" autocomplete="off" ></el-input>
	</el-form-item>
	<el-form-item label="咨询师">
	  <el-input v-model="consultData.consultant.consultantName" autocomplete="off" ></el-input>
	</el-form-item>
	  </el-form>
	  <template #footer>
	    <div class="dialog-footer">
	      <el-button @click="dialogFormVisible=false">关闭</el-button>
		</div>
	  </template>
	</el-dialog>
</template>

<script setup>
	const ids = ref([]);
	import {
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue';
	import { cloneDeep } from 'lodash-es';
	
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	const axios =getCurrentInstance().appContext.config.globalProperties.axios;
	
	//总的记录数
	const total = ref(0);
	//表格所用的数据
	const tableData=ref([])
	// 查看表单
	const title = ref('查看预约信息');
	// 查看表单是否显示
	const dialogFormVisible=ref(false)
	
	//查询数据表单
	const queryForm = ref({
		username: '',
		counselorName: '',
		pageNum: 1,
		pageSize: 10,
	
	})
	
	const consultData=ref({
		consultationTime:'',
		representation:'',
		sysUser:{
			username:'',
			},
			counselor:{
				counselorName:''
			}
		
	})
	
	//查询操作
  const query=()=>{
    axios.get('booking/page',{
      params: {
        'username': queryForm.value.username,
        'consultantName': queryForm.value.counselorName,
        pageNum: queryForm.value.pageNum,
        pageSize: queryForm.value.pageSize
      }
    }).then((resp)=>{
      if(resp.code==200){
        tableData.value=resp.data.list;
        total.value=resp.data.pageTotal;
      }
    })
  }

	//页面大小
	const handleSizeChange=(val)=>{
		query()
	}
	//当前页面
	const handleCurrentChange=(val)=>{
		query()
	}
	
	//查看
	const check = (row) => {
  title.value = '查看预约信息';
  dialogFormVisible.value = true;
  // 深拷贝
  consultData.value = cloneDeep(row);
  // 兜底处理
  if (!consultData.value.sysUser) {
    consultData.value.sysUser = { username: '' };
  }
  if (!consultData.value.counselor) {
    consultData.value.counselor = { counselorName: '' };
  }
};
  // 新增 cancel 方法
  const cancel = () => {
    dialogFormVisible.value = false
  }
	onMounted(()=>{
		query()
	})
	
	//删除操作
	const deleteInfo = (id) => {
		ElMessageBox.confirm(
				'确定要删除这条信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`/booking/${id}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	
	}
	//复选框选中数据
	const handleSelectionChange = (val) => {
		ids.value = val.map((item) => {
			return item.id;
		})
		console.log(ids.value);
		console.log(val);
	}
	//批量删除
	const deleteBatch = () => {
		ElMessageBox.confirm(
				'确定要删除这些信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
            axios.delete(`/booking/batch?ids=${ids.value.join()}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	
</script>

<style scoped>
	.serchForm .el-form {
		margin-top: 10px;
	}
</style>